import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Animated, TouchableOpacity, Image, PixelRatio, Alert
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style, toneTheme } from '../../../theme/style';
import navigationSeevice from '../../../components/navigation/navigationSeevice';
import { taskListResUrl } from '../_common/toolData';


import HTTP from '../../../utils/http';
import { API, API_GENERATE } from '../../../config/api';


const scale = GLOBAL.SCALE;
export class Future extends Component {
	constructor(props) {
		super(props);
		this.state = {
		}
		this.approvalList = []; // 审批列表
	}

	componentWillMount() {
		this._getApproval();
	}

	componentWillReceiveProps(props) {
		if (!props) return;
		this._getApproval();
	}

	// 待办列表
	_getApproval = async () => {
		if (this.orderly) return;
		this.orderly = true;
		this.approvalList = await HTTP.GET(API_GENERATE(API.INDEX_AUDITCNT)) || {};
		console.log("待办列表-数据", this.approvalList)
		this.orderly = false;
		if (this.approvalList && this.approvalList.cntList) {
			this.heightList = Math.ceil(this.approvalList.cntList.length / 4);
		}
		this.setState({ ls: true })
	}


	render() {
		let { cntList, totalCnt, incompletedCnt } = this.approvalList;
		return (
			<View>
				{incompletedCnt ?
					<View style={[styles.TopBox]}>
						<View style={styles.examBanner}>
							<Text style={{ fontFamily: 'PingFangSC-Semibold', marginRight: 5 }}>今日待审批</Text>
							{incompletedCnt === totalCnt ?
								<View style={{ backgroundColor: '#FB0B0B', height: 8, width: 8, borderRadius: 16 }}></View>
								: null
							}
							<View style={styles.progressBox}>
								<View style={[styles.progress, { width: 90 * incompletedCnt / totalCnt }]}>
								</View>
							</View>
							<Text style={{ fontFamily: 'PingFangSC-Semibold', marginLeft: 15, alignSelf: 'center' }}>{incompletedCnt}</Text><Text style={{ alignSelf: 'center' }}>/{totalCnt}</Text>
						</View>
						<View style={[styles.Approval]}>
							{
								cntList && cntList.map((item, index) => {
									return (
										<TouchableOpacity onPress={() => { console.log('taskListResUrl[item.taskType]', taskListResUrl[item.taskType]); navigationSeevice.navigate(taskListResUrl[item.taskType].pageUrl, taskListResUrl[item.taskType] || null) }} key={index} style={styles.ApprovalItem}>
											<Text style={styles.ApprovalTitle}>{item.incompletedCnt > 999 ? '999+' : item.incompletedCnt || '0'}</Text>
											<Text style={styles.ApprovalText}>{item.cntName || '-'}</Text>
											{(index + 1) % 3 && index !== cntList.length - 1 ? <View style={styles.ApprovalLine}></View> : null}
										</TouchableOpacity>
									)
								})
							}
						</View>
						<Image style={{ position: 'absolute', bottom: 0, right: 0, width: 120, height: 120 * scale, zIndex: -1 }} source={require("../../../imgs/home/banner-bg.png")} />
					</View> :
					<TouchableOpacity style={styles.examNone} onPress={() => { Alert.alert('当前暂无需要您处理的审批任务！') }}>
						<Text style={styles.examNoneText}>审批 0</Text>
					</TouchableOpacity>
				}
			</View>
		)
	}
}
// 20 + 60  + 30 + 20 + 43 + 5
const styles = StyleSheet.create({
	TopBox: {
		position: 'relative',
		marginBottom: 5 * scale,
		backgroundColor: '#FFFFFF',
		borderRadius: 25,
		marginLeft: 15 * scale,
		marginRight: 15 * scale,
		paddingTop: 20 * scale,
		paddingBottom: 10 * scale,
	},
	examNone: {
		position: "absolute",
		right: 20,
		top: -50,
		paddingHorizontal: 8,
		paddingVertical: 2,
		borderWidth: 1,
		borderColor: '#fff',
		borderRadius: 12
	},
	examNoneText: {
		color: '#fff',
		fontSize: 10
	},
	examBanner: {
		marginLeft: 25 * scale,
		flexDirection: 'row',
	},
	progressBox: {
		width: 90,
		height: 5,
		position: 'relative',
		backgroundColor: "#c2bebe",
		borderRadius: 16,
		marginLeft: 10,
		alignSelf: 'center'
	},
	progress: {
		height: 5,
		position: 'absolute',
		left: 0,
		top: 0,
		backgroundColor: "#000000",
		borderRadius: 16
	},
	indexBg: {
		position: 'absolute',
		width: '100%',
		left: 0,
		right: 0,
		top: -100 * scale,
		bottom: 0,
		zIndex: -1
	},
	indexImgBg: {
		width: '100%',
		height: 98 * scale,
		position: 'absolute',
		bottom: 0,
		left: 0,
		zIndex: -1
	},
	TopMr: {
		marginLeft: 20 * scale,
		marginRight: 20 * scale
	},
	speed: {
		flexDirection: 'row',
		marginTop: 30 * scale,
		alignItems: 'center',
		height: 20 * scale
	},
	speedTitle: {
		fontSize: 14 * scale,
		color: style.color.white,
		fontWeight: 'bold'
	},
	PercentageBox: {
		width: 75 * scale,
		height: 5 * scale,
		backgroundColor: '#999',
		//opacity: .6,
		borderRadius: 3 * scale,
		marginLeft: 10 * scale,
		marginRight: 10 * scale
	},
	PercentageInner: {
		backgroundColor: style.color.white,
		height: 5 * scale,
		width: '20%',
		borderRadius: 3 * scale,
	},
	PercentageNum: {
		color: style.color.white,
	},
	PercentageNumActive: {
		fontSize: 16 * scale,
		fontWeight: 'bold'
	},
	moreBox: {
		width: '100%',
		flexDirection: 'row',
		justifyContent: 'center',
		position: 'absolute',
		bottom: 0 * scale,
		height: 43 * scale
	},
	more: {
		padding: 15 * scale,
	},
	moreInner: {
		width: 13 * scale,
		height: 13 * scale,
		transform: [{ rotate: '0deg' }],
		tintColor: '#fff'
	},
	Approval: {
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
		marginTop: 10 * scale,
	},
	ApprovalItem: {
		width: '33%',
		height: 45 * scale,
		marginBottom: 15 * scale,
		position: 'relative'
	},
	ApprovalTitle: {
		textAlign: 'center',
		fontSize: 16 * scale,
		// color: '#fff',
		fontWeight: 'bold',
		marginBottom: 5 * scale
	},
	ApprovalText: {
		fontSize: 12 * scale,
		// color: '#fff',
		textAlign: 'center',
	},
	ApprovalLine: {
		position: 'absolute',
		right: 0,
		top: 10 * scale,
		width: 1 * scale,
		height: 15 * scale,
		backgroundColor: '#D8D8D8'
	},

	modalBox: {
		width: '100%',
		height: '100%',
		position: 'absolute',
		top: 0,
		backgroundColor: '#000',
		opacity: .3
	},
	modalListBox: {
		position: 'absolute',
		top: 85 * scale,
		right: 0 * scale
	},
	modalList: {
		width: 90 * scale,
		height: 90 * scale,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		backgroundColor: style.color.white,
		borderRadius: 5 * scale
	},
	modalImg: {
		tintColor: '#fff',
		width: 15 * scale,
		transform: [{ rotate: '180deg' }],
		marginLeft: 20 * scale
		//	height:
	},
	modalText: {
		textAlign: 'center',
		lineHeight: 35 * scale
	},
	modalTextActive: {
		borderTopWidth: 1 / PixelRatio.get(),
		borderTopColor: '#E4E4E4',
	},
	actionTitle: {
		width: 220 * scale,
		fontSize: 13 * scale,
		textAlign: 'center',
		lineHeight: 18 * scale
	},
	logOutTextColor: {
		color: '#FF3B30',
		fontSize: 20 * scale
	},
})